//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
} from 'antd';

import AsyncThreeLevelLinkAge from '@/components/GetCascaderByAsyncQuery';

const FormItem = Form.Item;
const { Option } = Select;


// 修改表单
@Form.create()
class UpdateForm extends PureComponent {
    static defaultProps = {
        handleUpdate: () => {},
    handleUpdateModalVisible: () => {},
values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
                id: props.values.id,
                user_id: props.values.user_id,
                province_code: props.values.province_code,
                province_name: props.values.province_name,
                city_code: props.values.city_code,
                city_name: props.values.city_name,
                county_code: props.values.county_code,
                county_name: props.values.county_name,
                details_address: props.values.details_address,
                is_defalut: props.values.is_defalut,
        },
        getCascaderData:"",
    };
}


selectedCascaderValue = (record) => {
    this.setState({
        getCascaderData: record
    })
}




 handleLocalUpdate = () => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue,getCascaderData } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue };
      this.setState(
        {
          formVals,
        }
      );
     if(getCascaderData) {
	    	formVals.province_code = getCascaderData[0].value;
	    	formVals.province_name = getCascaderData[0].label;
	    	formVals.city_code = getCascaderData[1].value;
	    	formVals.city_name = getCascaderData[1].label;
	    	formVals.county_code = getCascaderData[2].value;
	    	formVals.county_name = getCascaderData[2].label;
	  }
     handleUpdate(formVals);

    });
 };


renderContent = (formVals,parentCascaderMethod) => {
	console.log(formVals);
    const { form,geographicData } = this.props;
    const cascaderArr = [];
    cascaderArr.push(formVals.province_code);
    cascaderArr.push(formVals.city_code);
    cascaderArr.push(formVals.county_code);
    return (
        <Form  layout="vertical" hideRequiredMark>


                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    
                    <Col  md={12} sm={24}>
                        <FormItem  label="省/市/县">
                            {form.getFieldDecorator('province_code', {
                            rules: [{ required: false, message: '请选择省市县！'}],
                            })(<AsyncThreeLevelLinkAge {...parentCascaderMethod} cascaderValues={ cascaderArr }/>)}
                        </FormItem>
                    </Col>
                    
                    
                    <Col  md={12} sm={24}>
                        <FormItem  label="地址">
                            {form.getFieldDecorator('details_address', {
                            rules: [{ required: false, message: '请输入地址！', min: 1 }],
                            initialValue: formVals.details_address,
                            })(<Input placeholder="请输入" />)}
                        </FormItem>
                    </Col>



                </Row>
  

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col md={12} sm={24}>
                       <FormItem label="是否默认">
                            {form.getFieldDecorator('is_defalut',{
                        	initialValue: formVals.is_defalut,
                            })(
                                 <Select placeholder="请选择" style={{ width: '100%' }}>
                                     <Option value="1">是</Option>
                                     <Option value="0">否</Option>
                                 </Select>
                            )}
                       </FormItem>
                    </Col>
                    
                </Row>


    </Form>
);

};



render() {
    const { updateModalVisible, handleUpdateModalVisible, values,geographicData,requestModelName,dispatch} = this.props;
    const {  formVals } = this.state;
    const parentCascaderMethod = {
            dispatch,
            geographicData,
            selectedCascaderValue: this.selectedCascaderValue,
            requestModelName,
          }
    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="修改"
    visible={updateModalVisible}
    onOk={() => this.handleLocalUpdate()}
    onCancel={() => handleUpdateModalVisible(false, values)}
    afterClose={() => handleUpdateModalVisible()}
>

    {this.renderContent(formVals,parentCascaderMethod)}
</Modal>
);
}

}

export default UpdateForm;

